<template>
  <div class="goods">
    <div class="wrap">
      <!-- 面包屑组件 -->
      <Crumb>ddddd </Crumb>
      <img src="../assets/img/banner4.png" style="margin: 5px 0 20px 0;border-radius: 15px;" alt="" />
      <!-- 排序商品 -->
      <div class="sort">
        <ul>
          <strong>排序：</strong>
          <li :class="index == num1 ? 'active' : ''" v-for="(item, index) in Option1"
            @click="Option1Click(index, item.min, item.max)" :key="index">
            {{ item.txt }}
          </li>
        </ul>
      </div>
      <!-- 商品分类 -->
      <div class="genre">
        <ul>
          <strong>分类：</strong>
          <li :class="index == num2 ? 'active' : ''" v-for="(val, index) in Option2"
            @click="Option2Click(index, val.type)" :key="index">
            {{ val.txt }}
          </li>
        </ul>
      </div>
      <!-- List组件 -->
      <List :arr="goodsListShow" maxLength="3000"></List>
      <!-- 提示正在加载 -->
      <p class="loading">
        <img src="@/assets/img/loading.gif" alt="" v-show="!isReachBottom" />
        {{ isReachBottom ? "没有数据了" : "正在加载..." }}
      </p>
    </div>
  </div>
</template>

<script>
import { SearchGoodsAPI } from "@/request/api";
import Crumb from "@/components/Crumb.vue";
import List from "@/components/home/List.vue";
import { getScrollTop, getClientHeight, getScrollHeight } from "@/utils";
export default {
  data() {
    return {
      /* 栏目 目前可提供的参数是 1->精品推荐 2-> 热门兑换 0->全部 */
      did: 0,

      /* ( 1->实体商品 2->虚拟商品 0->全部 ) */
      type: 0,

      /* 大于多少积分，最少是0 */
      min: 0,

      /* 少于多少积分，最多是10000，当传入0的时候，会直接返回所有商品，无视后台逻辑。 */
      max: 0,

      /* 商品关键词 */
      Keyword: "",

      /* 所有商品列表信息数组 */
      goodsList: [],

      /* 每页要展示的商品数组 */
      goodsListShow: [],

      /* 每页条数 */
      size: 8,

      /* 当前页数 */
      page: 1,

      /* 页面加载节流 */
      flag: false,

      /* 最后一页数据加载完了*/
      isReachBottom: false,

      /* num1是 Option1当前选中样式 */
      num1: 0,

      /* 排序商品数组 */
      Option1: [
        { txt: "全部", min: 0, max: 100000 },
        { txt: "我能兑换的", min: 0, max: 10000 },
        { txt: "0-500个", min: 0, max: 500 },
        { txt: "1000-1500个", min: 1000, max: 1500 },
        { txt: "1500-2500个", min: 1500, max: 2500 },
        { txt: "2500-6500个", min: 2500, max: 6500 },
        { txt: "6500-10000个", min: 6500, max: 10000 },
      ],
      /* num2是 Option2当前选中样式  */
      num2: 0,
      /* 商品分类数组 */
      Option2: [
        { txt: "全部", type: 0 },
        { txt: "实物礼品", type: 1 },
        { txt: "虚拟礼品", type: 2 },
      ],
    };
  },
  components: {
    Crumb,
    List,
  },
  methods: {
    /* 排序商品数组点击事件 */
    Option1Click(index, min, max) {
      //修改当前下标的样式
      this.num1 = index;
      this.min = min;
      this.max = max;
      this.goodsSearch();
    },
    /* 商品分类数组 */
    Option2Click(index, type) {
      //修改当前下标的样式
      this.num2 = index;
      this.type = type;
      this.goodsSearch();
    },
    /* 对请求商品进行抽取(含商品搜索) */
    async goodsSearch() {
      let res = await SearchGoodsAPI({
        did: this.did,
        type: this.type,
        min: this.min,
        max: this.max,
        Keyword: this.Keyword,
      });
      if (!res) return;
      this.goodsList = res.data;
      this.goodsListShow = this.goodsList.filter((item, index) => {
        return index < 8;
      });
      console.log(res);

      /* 页面滚动加载完了，把对应数据改为原来的值 */
      this.isReachBottom = false;
      this.page = 1;
      //如果加载到了最后一页
      if (this.goodsListShow.length == this.goodsList.length) {
        this.isReachBottom = true;
      }
    },
    /* 页面滚动 */
    scrollFn() {
      //监测是否准备到达底部
      if (getScrollTop() + getClientHeight() >= getScrollHeight() - 20) {
        console.log("来到底了");
        //加载更多
        //第1次滚动到底部,要加载第2页的数据，i是从下标为8到下表为15
        //第2次滚动到底部,要加载第3页的数据,i是从下标为16到下表为23
        //第3次滚动到底部，要加载第4页的数据，i是从下标为24到下表为31
        if (this.flag == false) {
          //刚开始加载的时候,就改成真,为的是不让他继续触发加载
          this.flag = true;
          //延时器
          setTimeout(() => {
            //页面准备滚动到底加1
            this.page++;
            for (
              let i = this.size * (this.page - 1);
              i < this.size * this.page;
              i++
            ) {
              //针对最后一页没有8条数据的情况，加了一个判断
              this.goodsList[i]
                ? this.goodsListShow.push(this.goodsList[i])
                : "";
            }

            //加载了一页，改成false，以便下一次再次加载
            this.flag = false;
          }, 500);
        }

        //加载到最后一页
        if (this.goodsListShow.length == this.goodsList.length) {
          this.isReachBottom = true;
        }
      }
    },
  },
  created() {
    //把Header组件的input里的Keyword赋给this.Keyword
    this.Keyword = this.$route.query.Keyword || "";
    //页面加载时先发送一次请求
    this.goodsSearch();
  },
  mounted() {
    window.addEventListener("scroll", this.scrollFn);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scrollFn);
  },
  watch: {
    //监听路由参数变化更新数据
    "$route.query.Keyword": {
      handler(newVal) {
        this.Keyword = newVal || "";

        this.goodsSearch();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.sort,
.genre {
  ul {
    display: flex;
    justify-content: flex-start;
    margin: 30px 0;

    strong {
      font-size: 16px;
      color: #000;
      margin-right: 20px;
    }

    li {
      margin-right: 30px;
      font-family: SourceHanSansSC-Light;
      font-size: 16px;
      color: #999;
      cursor: pointer;

      &.active {
        color: #0a328e;
      }
    }
  }
}

.loading {
  text-align: center;
  margin-bottom: 20px;

  img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
  }
}
</style>